<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./index.css" />
  <title>css动画--写代码的浩</title>
</head>
<body>
  <select id="select1">
    <option value="none">无变形</option>
    <option value="translateX">translateX(30px) 移动</option>
    <option value="scaleX">scaleX(1.5) 缩放</option>
    <option value="rotateZ">rotateZ(30deg) 旋转</option>
    <option value="rotateZ-origin">rotateZ(30deg) 00基点旋转</option>
    <option value="skewX">skewX(30deg) 倾斜</option>
  </select>

  <div id="box1" class="box">写代码的浩</div>

  <br />
  <br />
  <br />
  <br />
  <br />
  <select id="select2">
    <option value="transition1">width过渡</option>
    <option value="transition2">width和height过渡</option>
  </select>
  <div id="box2" class="box transition1">写代码的浩</div>

  <br />
  <br />
  <br />
  <br />
  <br />
  <select id="select3">
    <option value="animation">简单动画</option>
    <option value="animation1">复杂动画</option>
  </select>
  <div id="box3" class="box animation">写代码的浩</div>
  
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <script src="./index.js"></script>
</body>
</html>
